<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<div id="app">
		<div class="container">
			<table class="table table-striped">
				<tr>
					<th>ID</th>
					<th>商品名</th>
					<th>单价</th>
					<th>数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item, index) in order">
					<td>{{index+1}}</td>
					<td>{{item.name}}</td>
					<td>{{item.price}}</td>
					<td><span class="btn btn-default btn-xs glyphicon glyphicon-minus" type="button" @click="subtract(index)"></span><input type="text" v-model="item.count"><span class="btn btn-default btn-xs glyphicon glyphicon glyphicon-plus" type="button" @click="add(index)"></span></td>
					<td>{{item.price*item.count}}</td>
					<td>
						<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#layer" v-on:click="curcount=index">删除</button>
					</td>
				</tr>
				<tr>
					<td>总计</td>
					<td colspan="3">{{ totalPrice }}</td>
					<td>
						<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#layer" v-if="order.length!=0" v-on:click="curcount=-2">全部删除</button>
					</td>
					<td>
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">添加商品</button>
					</td>
				</tr>
			</table>
			<div class="modal fade" id="layer" tabindex="-1" role="dialog">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title">Modal title</h4>
			      </div>
			      <div class="modal-body">
			        <p>选中的商品为：{{curcount}}</p>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="remove(curcount)">确认删除</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->

			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="exampleModalLabel">添加商品</h4>
			      </div>
			      <div class="modal-body">
			        <form>
			          <div class="form-group">
			            <label for="recipient-name" class="control-label">商品名:</label>
			            <input type="text" class="form-control" id="recipient-name" v-model="productName">
			          </div>
			          <div class="form-group">
			            <label for="recipient-name" class="control-label">单价:</label>
			            <input type="text" class="form-control" id="recipient-name" v-model="productPrice">
			          </div>
			          <div class="form-group">
			            <label for="recipient-name" class="control-label">数量:</label>
			            <input type="text" class="form-control" id="recipient-name" v-model="productCount">
			          </div>
			        </form>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="addProduct()">确认添加</button>
			      </div>
			    </div>
			  </div>
			</div>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script src="vue.min.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				order: [
					{"name": "小米6", "price": 3400, "count": 2},
					{"name": "小米5", "price": 3400, "count": 2},
					{"name": "小米4", "price": 3400, "count": 2},
					{"name": "iphoneX", "price": 8700, "count": 2},
					{"name": "iphone8", "price": 5600, "count": 2},
					{"name": "iphone7", "price": 4600, "count": 2}
				],
				curcount: 0,//将要删除的商品
				totalPrice: 0,
				productName: "小米6",
				productPrice: 3400,
				productCount: 1,
			},
			watch: {
				toCount: function() {
					console.log("watch");
				}
			},
			computed: {
				toCount: function() {
					var _this = this;
					this.totalPrice = 0;
					this.order.forEach(function(o,i){
						_this.totalPrice += (o.price * o.count);
					});
				}
				// computePrice: function() {
				// 	var sum = 0;
				// 	for(var i = 0, sum = 0; i < this.order.length; i++) {
				// 		sum += this.order[i].price*this.order[i].count;
				// 	}
				// 	return sum;
				// }
			},	
			methods: {
				remove: function(n){
					n == -2 ? this.order = [] : this.order.splice(n,1);
				},
				add: function(index){
					this.order[index].count++;
				},
				subtract: function(index){
					if(this.order[index].count<=1){
						if(confirm("您确定删除该商品吗")){
							this.order.splice(index,1);
						}
						return;
					}
					this.order[index].count--;
				},
				addProduct: function() {
					this.order.push({
						name: this.productName,
						price: this.productPrice,
						count: this.productCount
					});
					this.productName = "小米6";
					this.productPrice = 3400;
					this.productCount = 1;
				}
			}
		});
	</script>
</body>
</html>